<template>
  <view class="pages">
    <u-sticky class="w100" bgColor="#fff">
      <u-tabs :list="tabList" @change="changeTab" lineHeight="5" :current="current"></u-tabs>
    </u-sticky>
    <view class="my-order-list">
      <u-empty v-if="orderList.length===0" text="暂无订单" mode="history"></u-empty>
      <view class="item" v-for="item in orderList">
        <view class="tit">
          <image src="/static/home/icon-order-mobile.png"></image>
          <view class="text">手机订单</view>
          <view class="status" :class="'status' + item.status">{{statusParm(item.status)}}</view>
        </view>
        <view class="box">
          <view class="text">
            <text>回收金额：</text>
            <text class="price">{{item.expect_price || '？？？？'}}元</text>
          </view>
          <view class="text">
            <text>手机型号：</text>
            <text>{{item.product_name}}</text>
          </view>
          <view class="text">
            <text>颜色：</text>
            <text>{{item.colour}}</text>
          </view>
          <view class="text">
            <text>内存：</text>
            <text>{{item.memory}}</text>
          </view>
          <view class="text" v-if="item.imei!=''">
            <text>序列号：</text>
            <text>{{item.imei}}</text>
          </view>
        </view>
        <view class="operate">
          <text class="time">{{item.createtime_text}}</text>
          <view class="r">
            <button class="detail" @click="$to('/pages/order/detail',{id:item.id})">详情</button>
            <button v-if="item.status == 1" class="confirm" @click="$to('/pages/order/detail',{id:item.id})">信息确认</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        tabList: [{
          name: '全部',
          badge: {
            value: 0,
          }
        }, {
          id: 0,
          name: '待出价',
          badge: {
            value: 0,
          }
        }, {
          id: 1,
          name: '待确认',
          badge: {
            value: 0,
          }
        }, {
          id: 2,
          name: '待上门',
          badge: {
            value: 0,
          }
        }, {
          id: 3,
          name: '待打款',
          badge: {
            value: 0,
          }
        }, {
          id: 4,
          name: '已打款',
          badge: {
            value: 0,
          }
        }, {
          id: 5,
          name: '待最终报价',
          badge: {
            value: 0,
          }
        }, {
          id: 6,
          name: '已完成',
          badge: {
            value: 0,
          }
        }, {
          id: -1,
          name: '已取消',
          badge: {
            value: 0,
          }
        }],
        current:0,
        orderList: [],
        query: {
          page: 1,
          pageSize: 10,
        },
        loadMore: '',
      }
    },
    onReachBottom() {
      this.query.page++
      this.getOrder()
    },
    onLoad(option){

    },
    onShow() {
      this.getOrderStatistics()
      this.refresh()
    },
    methods: {
      // 切换状态
      changeTab(e) {
        this.query.status = e.id
        this.refresh()
      },
      // 订单数量
      async getOrderStatistics() {
        const res = await this.$http('/order/tongji')
        this.orderStatisticsData = res
        if (res.count > 0) this.tabList[0]['badge']['value'] = res.count
        if (res.dcj_count > 0) this.tabList[1]['badge']['value'] = res.dcj_count
        if (res.dqr_count > 0) this.tabList[2]['badge']['value'] = res.dqr_count
        if (res.dsm_count > 0) this.tabList[3]['badge']['value'] = res.dsm_count
        if (res.ddk_count > 0) this.tabList[4]['badge']['value'] = res.ddk_count
        if (res.ydk_count > 0) this.tabList[5]['badge']['value'] = res.ydk_count
        if (res.ysh_count > 0) this.tabList[6]['badge']['value'] = res.ysh_count //
        if (res.ywc_count > 0) this.tabList[7]['badge']['value'] = res.ywc_count
        if (res.yqx_count > 0) this.tabList[8]['badge']['value'] = res.yqx_count
      },
      // 获取订单列表数据
      async getOrder() {
        if (this.loadMore == 'nomore') return
        const res = await this.$http('/order/index', this.query)
        uni.stopPullDownRefresh()
        if (res.list.length <= this.query.pageSize) this.orderList = this.orderList.concat(res.list)
        if (res.list.length < this.query.pageSize) this.loadMore = 'nomore'
      },
      refresh() {
        this.loadMore = 'refresh'
        this.query.page = 1
        this.orderList = []
        this.getOrder()
      },
      // 解析订单状态
      statusParm(status) {
        const statusList = [{
            id: -1,
            label: "已取消"
          },
          {
            id: 0,
            label: "待出价"
          },
          {
            id: 1,
            label: "待确认"
          },
          {
            id: 2,
            label: "待上门"
          },
          {
            id: 3,
            label: "待打款"
          },
          {
            id: 4,
            label: "已打款"
          },
          {
            id: 5,
            label: "待最终报价"
          },
          {
            id: 6,
            label: "已完成"
          }
        ]
        return statusList[statusList.findIndex(item => item.id == status)].label
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    padding: 0 0 calc(16rpx + #{$safe});
  }
  ::v-deep .u-sticky{
    width: 100%;
  }
  ::v-deep .u-tabs__wrapper__nav__item__text {
    font-size: 28rpx !important;
  }

  .my-order-list {
    padding: 32rpx 16rpx;
    box-sizing: border-box;

    .item {
      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 16rpx;

      .tit {
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 30rpx;
        background-color: #edf3fa;
        color: #030100;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          width: 330rpx;
        }

        .status {
          width: 280rpx;
          font-size: 28rpx;
          text-align: right;
        }
        .status-1 {
          color: #909399;
        }

        .status0 {
          color: #fa3534;
        }

        .status1 {
          color: #fa3534;
        }

        .status2 {
          color: #fa3534;
        }

        .status3 {
          color: #fa3534;
        }

        .status4 {
          color: #fa3534;
        }

        .status5 {
          color: #fa3534;
        }

        .status6 {
          color: #19be6b;
        }
      }

      .box {
        padding: 20rpx 38rpx 0;

        .text {
          line-height: 56rpx;
          display: flex;
          align-items: center;
          color: #1d1715;
          font-size: 28rpx;

          text:first-child {
            width: 154rpx;
            color: #ccc;
          }

          .price {
            font-weight: 700;
            color: #fa3534;
          }
        }
      }

      .operate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 24rpx 28rpx 38rpx;

        .time {
          color: #999;
          font-size: 26rpx;
        }

        .r {
          display: flex;
          align-items: center;
          justify-content: end;
          .detail{
            padding:19rpx 23rpx;
            border-radius: 60rpx;
            background-color: #ecf6ff;
            color:#1890ff;
            font-size: 24rpx;

          }
          .confirm{
            margin-left: 14rpx;
            padding:19rpx 23rpx;
            border-radius: 60rpx;
            background-color: #1890ff;
            color:#fff;
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
